<template>
  <div class="security">
    <div class="header h-bor-top">
      <div class="content">
        <div class="crumb">
          <router-link to="/mycenter/security" class="alink">
            <i class="el-icon-arrow-left"></i>
            绑定谷歌验证器
          </router-link>
        </div>
      </div>
    </div>
    <!-- cont-body -->
    <div  class="trunk">
        <div  class="info">
          <i  class="iconfont icon-jinggao"></i>
          <p>谷歌验证器是一款动态口令工具，工作原理类似短信动态验证。绑定后每30s生成一个动态验证码，
            验证码可用于登录、提现、修改安全设置等操作的安全验证。</p>
        </div>
        <div  class="step">
          <span  class="icon">1</span>
          <div  class="content">
            <h2 >下载谷歌验证器APP</h2>
            <div
              
              class="describe"
            >iOS用户登录App Store搜索“Authenticator”下载。安卓用户登录应用商店或使用手机浏览器搜索“谷歌验证器”下载。</div>
            <div  class="fun-btn">
              <a
                rel="nofollow noopener noreferrer"
                target="_blank"
                href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8"
                class="button"
              >
                <i  class="iconfont icon-ai-ios mr5"></i> App Store
              </a>
              <a
                rel="nofollow noopener noreferrer"
                target="_blank"
                href="https://android.myapp.com/myapp/detail.htm?apkName=com.google.android.apps.authenticator2"
                class="button"
              >
                <i  class="iconfont icon-anzhuo mr5"></i> Google Play
              </a>
            </div>
          </div>
        </div>
        <div  class="step">
          <span  class="icon">2</span>
          <div  class="content">
            <h2 >在谷歌验证器中添加密钥并备份</h2>
            <div  class="describe">打开谷歌验证器，扫描下方二维码或手动输入下述密钥添加验证令牌。</div>
            <div  class="ga-code-box">
              <div  class="l-code">
                <!-- <img src="../../assets/images/user/gogimg.png" alt="" srcset=""> -->
                <vue-qr :text="qrUrl"  qid="testid"  :size="150" :margin="10"></vue-qr>
              </div>
              <div  class="serial-number">
                <div  class="id-number">
                  <p  name='googleKey'
                    v-text="googleKey"
                  ></p>
                </div>
                <div  class="copy">
                  <el-button size="mini" round class="color-link" v-clipboard:copy="googleKey"
                    v-clipboard:success="onCopy">
                    <em  class="fed-icon-copy"></em>
                    复制密钥
                  </el-button>
                </div>
              </div>
            </div>
            <div  role="alert" class="el-alert el-alert--warning is-light">
              <i class="el-alert__icon el-icon-warning"></i>
              <div class="el-alert__content">
                <span class="el-alert__title">密钥用于手机更换或遗失找回谷歌验证器，绑定前请务必奖下述密钥备份保存。</span>
                <!---->
                <!---->
                <i class="el-alert__closebtn el-icon-close" style="display: none;"></i>
              </div>
            </div>
          </div>
        </div>
        <div  class="step no-line step_three">
          <span  class="icon">3</span>
          <div  class="content">
            <h2 >输入谷歌验证器中6位验证码</h2>
            <div class="formbox m-top-15">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="谷歌验证码">
                  <el-input v-model="googleCode" 
                    :placeholder='$t("fillGoogleCode")||"填写谷歌验证码"'
                    maxlength="6"
                    class="w300"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>    
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
  data() {
    return {
      showModal: this.show,
      qrUrl: "",
      password: "",
      googleCode: "",
      form:{},
    };
  },
  watch: {},
  computed: {
    googleKey() {
      return this.qrUrl.substr(this.qrUrl.indexOf("=") + 1);
    }
  },
  mounted() {
    this.getGoogleKey();
  },
  methods: {
    getGoogleKey() {
      ////获取谷歌验证Key 后台接口
      this.request(this.api.getgooglekey, { showLoading: true }).then(res => {
        if (res.code == "0") {
          this.qrUrl = res.data[0].googleurl;
        } else {
          this.errMsg(res.msg || "获取数据失败");
        }
      });
    },
    onCopy() {
      this.successMsg("复制成功");
    },
    submitForm() {
      if (
        this.googleKey == "" ||
        this.googleCode == ""
      ) {
        this.errMsg("请填写完整信息");
        return false;
      }
      this.request(this.api.updategoogle, {
        googlekey: this.googleKey,
        googlecode: this.googleCode,
        showLoading: true
      }).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "操作成功");
          this.showModal = false;
          this.$emit("onGoogleBind");
        } else {
          this.errMsg(res.msg);
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.security {
  .header {
    height: 148px;
    background-color: #1b2945;
    .content {
      margin: 0 auto;
      padding-top: 43px;
      width: 1200px;
      i {
        color: #357ce1;
        font-weight: 600;
      }
      .crumb {
        margin: 0 auto;
        padding-top: 50px;
        width: 1200px;
        color: #d2d6ec;
        line-height: 16px;
        font-size: 16px;
      }
    }
  }
}
// cont_body
.trunk {
  margin: 24px auto 146px;
  width: 1200px;
  font-size: 12px;
  box-sizing: border-box;
  .info{display: flex;align-items:center;
    p{color: #657284;}
  }
  .step {
    padding: 0 28px 32px 0;
    margin-top: 32px;
    border-bottom: 1px solid #e6ecf2;
    .icon {
      float: left;
      margin-right: 8px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      line-height: 18px;
      background-color: rgba(24,144,255,.15);
      color: #357ce1;
      font-size: 14px;
      text-align: center;
    }
    .content{
      h2{font-size: 14px;color: #1c242c;line-height: 18px;}
      .describe {
          padding: 15px 0 14px;
          line-height: 20px;
          color: #495666;
      }
      .fun-btn{
        .button{
          display: inline-block;
          width: 180px;
          height: 40px;
          background-color: #357ce1;
          color: #fff;
          border-radius: 2px;
          line-height: 40px;
          font-weight: 400;
          text-align: center;
          font-size: 14px;
          &:nth-child(2){margin-left: 15px;}
        }
      }
      .ga-code-box{
        display: flex;margin-bottom:20px;
        .color-link{color: #357ce1;}
        .serial-number{
          margin-left: 15px;
          p{margin-top: 15px;}
        }
        .copy{margin-top: 15px;}
      }
      .formbox  {
        .w300{width: 300px;}
      }
    }
    
  }
  
  .l-table {
    border-radius: 2px;
    border: 1px solid #e6ecf2;
    background-color: #fff;
  }
  .l-table-title {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 24px;
    font-size: 14px;
    min-height: 48px;
    border-bottom: 1px solid #e6ecf2;
    background-color: #f2f6fa;
  }
}
.mt16 {
  margin-top: 36px;
}
</style>